<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<style>

</style>
<body>
<div class="demoTable">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('table', function(){
        var table = layui.table;

        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            ,url: '/login/findAll.do'
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
                ,{field:'name', title: '用户名', width:80}
                ,{field:'pwd', title: '性别', width:80, sort: true}
                ,{field:'city', title: '城市', width:80}
                ,{field:'sign', title: '签名'}
                ,{field:'experience', title: '积分', sort: true, width:80}
                ,{field:'score', title: '评分', sort: true, width:80}
                ,{field:'classify', title: '职业', width:80}
                ,{field:'wealth', title: '财富', sort: true, width:135}
            ]]
            ,id: 'testReload'
            ,page: true
            ,height: 315
        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {

                            id: demoReload.val()

                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>


<table class="layui-table" lay-data="{url:'/login/findAll.do', id:'test3'}" lay-filter="test3" >
    <thead>
    <tr>
        <th lay-data="{type:'numbers'}"></th>
        <th lay-data="{type:'checkbox'}">ID</th>
        <th lay-data="{field:'id', width:80, sort: true}">ID</th>
        <th lay-data="{field:'name', width:120, sort: true, edit: 'text'}">用户名</th>
        <th lay-data="{field:'pwd', edit: 'text',width:120}">邮箱</th>
        <th lay-data="{field:'sex', title:'性别', width:85, templet: '#switchTpl', unresize: true}">性别</th>
        <th lay-data="{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}">城市</th>

    </tr>
    </thead>
</table>

<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="开启|关闭" lay-filter="sexDemo" {{ d.id == 6 ? 'checked' : '' }}>
</script>

<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 7 ? 'checked' : '' }}>
</script>
</body>
</html>
<script>

    $(function () {
        //定义传递的数据
       /* var data={
            roleName:'扈三娘',
            note:'一丈青',
            pageParams:{
                start:1,
                limit:30
            }
        }*/

        $.post({
            url:'/login/findAll.do',

            data:{"page":"0","limit":"10"},
            success:function(result){
                alert(JSON.stringify(result.data))
            },
            error:function(){
                alert(2);
            }

        });

        layui.use('table', function(){
            var table = layui.table
                ,form = layui.form;

            //监听性别操作
            form.on('switch(sexDemo)', function(obj){
                layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            });

            //监听锁定操作
            form.on('checkbox(lockDemo)', function(obj){
                layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            });

            table.on('edit(test3)', function(obj){
                var value = obj.value //得到修改后的值
                    ,data = obj.data //得到所在行所有键值
                    ,field = obj.field; //得到字段
                layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
            });
        });


    })



</script>